/*
 * @Description: 公交线路列表模块-竹节图
 * @Author: yingying.fan
 * @Date: 2019-05-10 18:02:36
 * @Last Modified by: yingying.fan
 * @Last Modified time: 2019-05-28 18:29:08
 */
 <template>
  <!-- 站点列表竹节图 -->
  <div class="station-slub-chart-wrapper">
    <div
      class="station-list-wrapper"
      :style="`width:${lineWidth}rem`"
      ref="stationListWrapper"
    >
      <div class="station-list-line"></div>
      <!-- 公交列表 -->
      <station-bus-list
        v-for="(routeBus, key) in routeBusObject"
        :key="`bus_${key}`"
        :busList="routeBus"
        :stationIndex="getBusStationIndex(key)"
      ></station-bus-list>
      <!-- 站点列表 -->
      <template v-for="(item, index) in busStationList">
        <div
          class="route-station-inline-block station-divide-line"
          :key="`arrow_${index}`"
          v-if="index!==0"
        >
          <img src="../assets/line-arrow.png">
        </div>
        <station
          ref="station"
          :key="`station_${index}`"
          class="route-station-inline-block"
          :index="index"
          :selected="selectedIndex===index"
          :stationInfo="item"
          @click.native="setSelectedStaion(index)"
        ></station>
      </template>
    </div>
  </div>
</template>

<script>
import RouteLineBusList from './RouteLineBusList'
import RouteLineStationItem from './RouteLineStationItem'
export default {
  components: {
    'station-bus-list': RouteLineBusList,
    'station': RouteLineStationItem
  },
  props: {
    // 选中站点的序号
    // selectedIndex: {
    //   type: Number,
    //   default: () => {
    //     return -1
    //   }
    // },
    busStationList: {
      type: Array,
      default: () => {
        return null
      }
    },
    routeBusObject: {
      type: Object,
      default: () => {
        return null
      }
    }
  },
  data() {
    return {
      stationListWrapperLeft: 0
    }
  },
  computed: {
    selectedIndex() {
      return this.$store.getters.selectedIndex
    },
    lineWidth() {
      let width = 0
      if (this.busStationList && this.busStationList.length > 0) {
        width = 150 * this.busStationList.length - 8.0
      }
      width = width / 75.0
      return width
    }
  },
  watch: {
    // 每次站点数据变化的时候，将默认选中的站点移动到屏幕中间
    busStationList(newValue, oldValue) {
      this.scrollToCenter()
    }
  },
  mounted() {
  },
  methods: {
    // 设置默认选中的站点
    setSelectedStaion(index) {
      this.$store.dispatch('fetchSelectedIndex', index)
      this.$store.dispatch('fetchSelectedStation', this.busStationList[index])
      this.$EventBus.$emit('refreshDataWithoutPop')
    },
    // 获取当前公交所在站点的索引
    getBusStationIndex(stationId) {
      stationId = stationId.split('_')[0]
      // 查找符合条件的数据的索引
      return this.busStationList.findIndex((station, index) => {
        return station.stationId === stationId
      })
    },
    // 滑动到中间位置
    scrollToCenter() {
      if (this.$refs.station) {
        let item = this.$refs.station[this.selectedIndex].$el
        this.$el.scrollLeft = item.offsetLeft - (document.body.clientWidth - item.offsetWidth) / 2
      }
    }
  }
}
</script>

<style scoped>
.station-slub-chart-wrapper {
  overflow-x: auto;
  overflow-y: hidden;
  /* position: relative; */
}
/* 整个站点列表的包裹层 */
.station-list-wrapper {
  /* height: 500px; */
  height: calc(100% - 88px);
  position: relative;
  overflow: hidden;
  padding: 88px 4px 0 4px;
  color: #333333;
  font-size: 0;
  /* box-sizing: border-box; */
  /* 为了让滑动更流畅 */
  -webkit-overflow-scrolling: touch;
}
/* 站点列表的线 */
.station-list-line {
  width: 100%;
  height: 16px;
  background-color: #a1b9c7;
  position: absolute;
  top: 88px;
  left: 0;
  z-index: 0;
}
/* 站点列表下的每个站点元素 */
.station-list-wrapper > .route-station-inline-block {
  display: inline-block;
  vertical-align: top;
  position: relative;
  z-index: 2;
}
.station-divide-line {
  /* width: 116px; */
  width: 8px;
  height: 16px;
  line-height: 18px;
  text-align: center;
  /* font-size: 12px;
  font-weight: bold;
  color: #ffffff; */
}
.station-divide-line > img {
  width: 8px;
  height: 8px;
  margin: 4px 0;
}
</style>
